<template>
	<view style="overflow: hidden;">
		<view class="fund-contain"></view>
		<view class="deposit-fund first-style">
			<view style="text-align: center;font-size: 100upx;color: red;margin-top: 50upx;">￥{{pending_for_withdraw_amount||0.00}}</view>
			<view style="text-align: center;font-size: 30upx;font-weight: bold;margin-bottom: 60upx;">被动收益</view>
			<view class="deposit-fund-content">
				<view class="deposit-fund-content-details">
					<view class="">{{ total-incomes.length }}</view>
					<view class="" style="color: #999999;font-size: 12px;margin-top: 2px;text-align: center;-webkit-box-flex: 1;-webkit-flex-grow: 1;
    flex-grow: 1;">剩余绑定名额</view>
					
				</view>
				<view class="deposit-fund-line"></view>
				<view class="deposit-fund-content-details">
					<view class="">{{ incomes.length }}</view>
					<view class="" style="    color: #999999;
					font-size: 12px;
					margin-top: 2px;
					text-align: center;
					-webkit-box-flex: 1;
					-webkit-flex-grow: 1;
					flex-grow: 1;">已经绑定名额</view>
				</view>
			</view>
			<view class="deposit-binding" @click="gotoWithdraw">
				提现到微信零钱
			</view>
			<view class="deposit-binding-tip" v-html="detuils"></view>
			<!-- <view class="deposit-binding-tip">{{detuils}}</view> -->
		</view>
		<view class="">
			<view class="group-state-title">
				<view class="">
					<view class="group-state-contain">
						<view :class="groupStatusIndex==index?'group-state-active':''" v-for="(item,index) in groupStatus" :key='index' data-index="index" @click="changeIndex(index)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="" v-if="groupStatusIndex == 0" :loading="loading">
					<view v-if="incomes.length>0">
						<view v-for="(income,index) in incomes" :key="index" style="width: 630upx;height: 140upx; border-bottom: 1px solid #999999;margin-bottom: 20upx;">
							<view style="position: relative; width: 120upx;height: 120upx;display: flex;"><image :src="income.store_logo" style="width:100%;height: 100%;border-radius: 300upx;" mode="scaleToFill"></image></view>
							<view style="position: relative;font-size: 20upx;top: -95upx;left: 145upx;">
								<view style="font-size: 28upx;">{{income.name}}</view>
								<view style="font-size: 28upx;color: #999999;">绑定时间：{{income.date_added}}</view>
							</view>
						</view>
					</view>
					<view class="no-data"v-else>
						暂无数据
					</view>
				</view>
				<view class="expend-content" v-if="groupStatusIndex == 1">
					<view v-if="withdraws.length>0">
						<view v-for="(withdraw,index) in withdraws" :key="index" class="olinecourse" v-if="withdraw.customer">
							<view class="topleft"><image style="width: 100%;height: 100%;" :src="withdraw.customer.avatar" mode="aspectFit"></image></view>
							<view class="topright">{{withdraw.title}}</view>
							<view style="position: relative;top: -50upx;left:220upx;font-size: 25upx;height: 0upx;"><text style="color: #999999;">下级团队推荐：</text><text style="color: red;">￥{{withdraw.shared_customer2.money}}</text><view style="position: relative;top: -68upx;left: 260upx;"><image style="width: 100upx;height: 100upx;" :src="withdraw.labelurl" mode=""/><text style="position: relative;left:-80upx;top:-40upx;color:#F9F9F9">{{withdraw.label}}</text></view></view>
							<view style="font-size: 25upx;font-weight: bold;color: #999999;margin-top: 30upx;margin-bottom: 30upx;">
								<view style="">推荐成功规则：{{withdraw.illustration}}</view>
								<view style="">所属团队：{{withdraw.storename}}</view>
							</view>
						</view>
					</view>
					<view class="no-data" v-else>暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				groupStatus:['你已绑定招生团队','推荐订单'],
				groupStatusIndex:0,
				store_id:0,
				total:0.00,
				pending_for_settlement_amount:0.00,
				pending_for_withdraw_amount:0.00,
				withdraws:[],
				incomes:[],
				page:1,
				page_size:100000,
				type:'',
				isd:'',
				rate:0,
				imglink: this.$store.state.imgLink,
				token:'',
				detuils:'',
				loading:true,
				allteamList:[],
				teambenefits:[],
				courseList:[]
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
				
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.token=uni.getStorageSync('token')
			this.pending_for_withdraw_amount=options.money
			this.isd = parseInt(options.isd,10)
			console.log(this.isd,"++++++++++++++++++++++++++++++++++");
			// this.get_teams()
			// this.getprotocol()
			// this.get_teams()
			// console.log("987")
			this.getprotocol()
			this.getcoursesList()
			this.getteamsList()
		},
		filters:{
			formatDates(value) {
				let date = new Date(value * 1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let mm = date.getMinutes();
				mm = mm < 10 ? ('0' + mm) : mm;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + '  ' + h + ':' + mm + ':' + s;
			}
		},
		onShow(){
			// this.get_store_capital();
			// if(this.groupStatusIndex == 0){
				
			// 	this.page = 1
			// 	this.page_size = 100000
			// 	this.withdraws = []
			// 	this.incomes =[]
			// 	this.get_teams();
				
			// }else{
				
				
			// 	this.page = 1
			// 	this.page_size = 100000
			// 	this.withdraws = []
			// 	this.incomes =[]
			// 	this.get_store_withdraw();
			// }
			console.log("show")
			// this.getteamsList()
			// // this.get_teams()
			// // console.log("987")
			// this.getprotocol()
			// this.getcoursesList()
			// this.getteamsmoney()
			// this.changeIndex(0)
		},
		methods:{
			LoadingRecommend(){
				console.log("执行了")
			},
			getcoursesList(){
				const data={
					token:this.$store.getters.getToken,
					loading:1
				}
				this.$api.get_online_courses(data).then(res=>{
					// console.log(res.list,)
					this.courseList=res.list
				})
			},
			getteamsList(){
				
				const datas={
					token:this.token,
					page:1,
					pagesize:10000,
					loading:1
				}
				this.$api.get_all_teams(datas).then(res=>{
					res.list.data.map(item=>{
						this.allteamList[item.customer_store_id]=item
					})
					// this.allteamList=res.list.data
					this.get_teams()
				})
			},
			getteamsmoney(){
				let data = {
					token:this.$store.getters.getToken,
					loading:1
				}
				this.$api.get_store_capital(data).then(res => {
					console.log(res.storeInfo,"1456")
					if(res.status){
						this.teambenefits.storeInfo=res.storeInfo
						// console.log(res.storeInfo,"storeInfo")
						// this.teambenefits.allmaney=this.teambenefits.storeInfo.reward_balance_total2||0+Number(this.teambenefits.storeInfo.reward_balance_total)/10000
						// this.teambenefits.allmaney=this.teambenefits.allmaney.toFixed(4)
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
					}
					
				}).catch(err => {
					
					uni.showToast({
						title:err,
						icon:"none",
						duration:2000
					})
					
					console.log(err,'that.$api.get_store_income')
				})
			},
			getprotocol(){
				let data = {
					token:this.$store.getters.getToken,
					loading:1
					// type:'banksetting'
				}
				this.$api.bingind_protocol(data).then(res => {
					console.log(res,"996")
					res.list.data.map(item=>{
						// console.log("123",item)
						if(item.title.match("绑定说明")){
							this.detuils=item.content
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			async get_teams(){
				this.incomes =[]
				let that=this
				let data = {
					token:this.token,
					customer_store_id:this.store_id,
					loading:1
				}
				let allstore_id=[]
				await this.$api.gain_shop_msg(data).then(res=>{
					console.log(res.data,"teams")
					this.total=res.data.team_num
					console.log("123",res.data.team_customer_store_id!=null)
					if(res.data.team_customer_store_id!=null){
					  allstore_id=res.data.team_customer_store_id.split(',')
					}else{
						console.log("123")
						uni.hideLoading()
					}
					allstore_id.map(item=>{
						this.allteamList[item].date_added=res.data.date_modified
						that.incomes.push(this.allteamList[item])
						uni.hideLoading()
					})
					
					// this.allteamList.map(ress=>{
					// 	for(let i=0;i<allstore_id.length;i++){
					// 	  if(ress.customer_store_id==Number(allstore_id[i])){
					// 		  console.log(ress,"123789")
					// 		  ress.date_added=res.data.date_modified
					// 			that.incomes.push(ress)
					// 			uni.hideLoading()
					// 	  }
					// 	}
					//  })
				})
			},
			get_store_capital(){
				
			},
			async get_store_withdraw(){
				this.withdraws=[]
				let that=this
				// console.log("jinlaile")
				console.log(this.incomes,"jinlaile")
				await this.incomes.map(items=>{
					console.log(this.$store.getters.token,"jinlaile")
					const data={
						token:this.$store.getters.token,
						// is_new_user:1,
						// store_id1:that.store_id,
						store_id2:that.store_id,
						loading:1
					}
					that.$api.get_online_courses_order(data).then(res=>{
						console.log(res.list.data,"orderceshi")
						res.list.data.map(item=>{
								that.courseList.map(ress=>{
									// if(ress.id)
									// console.log(item,ress,"orderceshi")
									if(ress.id==item.online_courses_id){
										console.log(item,"ccccccc")
										item.second_money=ress.second_money
										item.img=ress.img
										item.illustration=ress.illustration
										// console.log(item.shared_customer2==null,"996")
										if(item.shared_customer2==null){
											item.shared_customer2={money:0}
										}else{
											
										}
										if(item.store2!=null){
											if(item.store!=null){
												item.storename=item.store.name
											}else{
												item.storename=item.store2.name
											}
										}else if(item.store2!=null){
											item.storename=item.store2.name
										}
										
										console.log(items.customer_store_id,item.shared_customer1.store_id,"789+++++++++++++++++++++++++++++++")
										if(items.customer_store_id===item.shared_customer1.store_id){
											if(item.pay_status==1){
												if(item.shared_customer2&&item.shared_customer2.status=='in_confirm'){
													item.labelurl=that.imglink+'member/bluelabel.svg'
													item.label="待确认"
													that.withdraws.push(item)
													uni.hideLoading()
												}else if(item.shared_customer2&&item.shared_customer2.status=='confirmed'){
													item.labelurl=that.imglink+'member/greenlabel.svg'
													item.label="已到账"
													that.withdraws.push(item)
													uni.hideLoading()
												}else if(item.shared_customer2&&item.shared_customer2.status=='invalid'){
													item.labelurl=that.imglink+'member/redlabel.svg'
													item.label="已失效"
													that.withdraws.push(item)
													uni.hideLoading()
												}
												// that.withdraws.push(item)
												console.log(that.withdraws,"77777777777777777777777777")
												console.log("1")
											}
											
										}else if(item.shared_customer1.store_id==that.store_id){
											if(item.pay_status==1){
												that.withdraws.push(item)
											}
										}else{
											uni.hideLoading()
										}
									}
									
								})
								// console.log(this.withdraws,"789")
						})
					})
				})
				
			},
			changeIndex(index){
				
				this.groupStatusIndex = index
				// console.log("123")
				if(this.groupStatusIndex == 0){
					console.log("123")
					this.page = 1
					this.page_size = 100000
					// this.withdraws = []
					// this.incomes =[]
					this.get_teams();
					
				}else{
					this.page = 1
					this.page_size = 100000
					// this.withdraws = []
					// this.incomes =[]
					this.get_store_withdraw();
				}
				
			},
			gotoWithdraw(){
				uni.navigateTo({
					url:'/pages/memberCenter/fundManage/deposit/deposit?store_id=' + this.store_id + '&type=' + 1 + '&is_online=1&is_online_courses=1&level=2'
				})
			}
		}
	}
</script>

<style>
	.olinecourse{
		/* box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13); */
		border: solid rgba(0,0,0,0.13) 1px;
		border-left: none;border-right: none;border-top: none;
		padding: 15upx;
		padding-left: 0upx;
		padding-right: 0upx;
		width: 580upx;
		height: 100%;
		margin-left: 30upx;
	}
	.label{
		width: 200upx;
	}
	.topleft{
		width: 180upx;
		height: 150upx;
		/* position: relative; */
		left: 0upx;
	}
	.topright{
		width: 400upx;
		height: 00upx;
		font-size: 25upx;
		font-weight: bold;
		position: relative;
		left: 220upx;
		top:-130upx;
	},
	
	page{
		background: #F3F3F4;
	}
	.fund-contain{
		width: 100%;
		height: 408upx;
		background: url(https://tool.tuanhaoke.cn/static/image/member/fund.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 46upx;
		box-sizing: border-box;
	}
	.deposit-fund{
		width: 100%;
		height: 376upx;
		background: #FFFFFF;
		padding: 30upx 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.first-style{
		width: 680upx;
		height: 100%;
		margin-left: 36upx;
		border-radius: 24upx 24upx 24upx 24upx;
		margin-top: -380upx;
	}
	.deposit-fund-content{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.deposit-fund-content-details{
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child{
		color: #333333;
		font-size: 36upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child>text{
		font-size: 28upx;
	}
	.deposit-fund-content-details>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 4upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-binding{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		margin-top: 50upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 18upx 0 rgba(255, 111, 95, 0.18);
	}
	.deposit-binding-tip{
		/* text-align: center; */
		color: #333333;
		font-size: 24upx;
		margin-top: 30upx;
	}
	.group-state-title{
		width: 680upx;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
		margin-left: 35upx;
		border-radius:24upx;
	}
	.group-state-title>view{
		padding: 18upx 0;
		box-sizing: border-box;
		width: 100%;
		/* border-bottom: 1upx solid #DEDEDE; */
	}
	.group-state-contain{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		background: #F2F2F2;
		border-radius: 32upx;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		border-radius: 32upx;
	}
	.group-state-contain .group-state-active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.staff-name-img{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.staff-name-img>view>image{
		width: 80upx;
		height: 80upx;
	}
	.staff-name{
		color: #333;
		font-size: 28upx;
		line-height: 80upx;
		margin-left: 20upx;
		width:150upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.staff-time{
		color: #999;
		font-size: 24upx;
		line-height: 80upx;
	}
	.staff-time>text{
		color: #333333;
		font-size: 18upx;
	}
	
	.withdraw{
		background: rgba(255, 139, 70, 0.17);
		color: #FF8B46;
	}
	.pay-status{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
		font-size: 28upx;
	}
	.pay-status>view:first-child{
		color: #666666;
		margin-left: 100upx;
	}
	
	.expend-content{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		padding:  0 30upx;
		box-sizing: border-box;
	}
	.expend-details-content{
		width: 100%;
		padding: 34upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
		justify-content: space-between;
	}
	.expend-details-content:last-child{
		border: 0;
	}
	
	.expend-details-state{
		flex-grow: 1;
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
	}
	.expend-details-state>view:last-child{
		color: #333333;
	}
	
	.no-data{
		font-size: 28upx;
		color:#b1b1b1;
		width: 100%;
		background: #FFFFFF;
		height:200upx;
		line-height: 200upx;
		box-sizing: border-box;
		text-align: center;
		vertical-align: middle;
	}
</style>
